iT邦幫忙

2023 iThome 鐵人賽

DAY 16
0
Modern Web

給心理人的前端網頁開發系列 第 16

[給心理人的前端網頁開發] 16 關卡二:網路問卷 - 在 CodeSandBox 上寫前端網頁問卷

  • 分享至 

  • xImage
  •  

關卡二要做出一個網路問卷系統。昨天講了用 Google App Script 當作後端,今天則是要做出前端網頁,讓整個網路問卷能順利運作。

請先看 demo

一、HTML 部份

主要由一個 form 表單所組成。再來裡面有很多的 form 內部常用元素,例如 label (標籤)、input (輸入框)、textarea (更大的輸入框)。詳細元素用途請參照延伸閱讀。

<form id="netForm">
  <label class="block">
    <span>暱稱</span>
    <input type="text" name="name" />
  </label>
  <label class="block">
    <span>自介</span>
    <textarea name="intro" rows="3" cols="19"></textarea>
  </label>
  <div class="block">
    <span>生理性別</span>
    <div>
      <label>
        <input type="radio" name="sex" value="male" checked />
        <span>男der</span>
      </label>

      <label>
        <input type="radio" name="sex" value="female" />
        <span>女der</span>
      </label>

      <label>
        <input type="radio" name="sex" value="others" />
        <span>其他</span>
      </label>
    </div>
  </div>
  <label class="block">
    <span>年齡</span>
    <input type="number" name="age" />
  </label>
  <label class="block">
    <span>身高(cm)</span>
    <input type="number" name="height" />
  </label>
  <label class="block">
    <span>體重(kg)</span>
    <input type="text" name="number" />
  </label>
  <label class="block">
    <span>怎麼接觸到此文章的</span>
    <textarea name="why" rows="3" cols="19"></textarea>
  </label>
  <label class="block">
    <span>其他想說的話</span>
    <textarea name="note" rows="3" cols="19"></textarea>
  </label>
  <div class="button-area">
    <button>
      送出資料
    </button>
  </div>
</form>

延伸閱讀

二、JavaScript 部份

整個 JS 的流程大概長這樣:

  • 畫面初始化
    • 取得 button, form 元素
    • 監聽 button 的一舉一動,這邊是指被點擊時會觸發的 click 事件
  • 點擊按鈕
    1. 取得 form 的資料
    2. 傳送資料給後端

詳細語法用途請參考延伸閱讀。

var button = document.querySelector("button");
var form = document.querySelector("form");
var api =
  "https://script.google.com/macros/s/AKfycbz-mSZJlJ8yo_8ixaoeDp5zCvuDjKdpGvfOf6wYBywJVvkSS4D8YJ0S6s3X1bFS7wJH/exec";

// function: 取得 form 的資料
function getFormData() {
  var formData = new FormData(form); // 取得 form 的資料們
  var data = Object.fromEntries(formData.entries()); // 一筆一筆取得資料,轉成物件格式
  return data;
}

// function: 送出 form 的資料到後端
function sentFormData(event) {
  event.preventDefault(); // 避免瀏覽器預設的送出表單行為產生
  var formData = getFormData(); // 執行函式,取得 form 資料

  fetch(api, {
    method: "POST", // 通常新增資料時,後端工程師會將 API 設計成使用 POST 方法
    body: JSON.stringify(formData), // 請求中的內容放剛剛的 form 資料
    headers: new Headers({
      "Content-Type": "text/plain;charset=utf-8" // 請求中的內容類型是純文字格式
    })
  })
    .then((res) => res.json())
    .catch((error) => console.error("Error:", error))
    .then((response) => {
      console.log("Success:", response);
      alert("成功送出問卷!");
      form.reset(); // 重設表單資料
    });
}

// 註冊 click 點擊事件監聽器
// 當 button 被點擊,則執行 sentFormData 函式
button.addEventListener("click", sentFormData);

延伸閱讀

小結

今天介紹了網路問卷的前端架構。

關卡二:網路問卷

明天將說明也許你不需要手刻網路問卷


上一篇
[給心理人的前端網頁開發] 15 關卡二:網路問卷 - 用 Google App Script 當後端
下一篇
[給心理人的前端網頁開發] 17 關卡二:網路問卷 - 也許你不需要手刻網路問卷
系列文
給心理人的前端網頁開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言